main {
  display: grid;
  width: 600px;
  height: 600px;
  border: 10px solid skyblue;
  /* grid-template-columns: 100px 100px 100px; */
  /* grid-template-columns: repeat(2, 100px); */
  /* grid-template-columns: repeat(auto-fill, 100px); */
  /* grid-template-columns: 1fr 2fr 3fr; */
  /* grid-template-columns: 1fr minmax(150px, 1fr); */
  /* grid-template-columns: 100px auto 100px; */
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: 100px 100px 100px 100px;
  /* row-gap: 20px;
  column-gap: 20px; */
  gap: 20px;
  grid-template-areas:
    "a a a"
    "b b b"
    "g h i";
  /* grid-auto-flow: row; */
  /* justify-items: start; */
  /* align-items: start; */
  /* place-items: center center; */
  /* justify-content: space-between; */
  /* align-content: space-between; */
  /* grid-auto-rows: 100px; */
}

.item {
  font-size: 50px;
  background-color: #e91e63;
  color: #000;
}

.item-1 {
  /* grid-column-start: 1; */
  /* grid-column-end: 3; */
  /* grid-column: 1 / 3; */
  /* grid-row-start: 1; */
  /* grid-row-end: 3; */
  /* grid-row: 1 / 3; */
  /* grid-column: span 2; */
  /* grid-area: a; */
  justify-self: center;
  background-color: lightblue;
}

.item-2 {
  background-color: lightcoral;
}

.item-3 {
  background-color: lightgoldenrodyellow;
}

.item-4 {
  background-color: lightgreen;
}

.item-5 {
  background-color: lightgrey;
}

.item-6 {
  background-color: slateblue;
}

.item-7 {
  background-color: yellowgreen;
}

.item-8 {
  background-color: springgreen;
}

.item-9 {
  background-color: teal;
}

.item-10 {
  background-color: lavenderblush;
}
